/**
 * Created by DELL on 2017/6/1.
 */


import React from 'react';
import
{
    View,
    Text,
    TouchableHighlight,
    Image,
    ScrollView,
    WebView,
    TouchableOpacity,
    Modal,
}
    from 'react-native';

import  BaseComponent, {base,AppIndictor} from '../../base/Base' ;
import ShareBoardPage from '../widgets/ShareBoardPage'

import {
    MapView,
    MapTypes,
    Geolocation
} from 'react-native-baidu-map';

let {
    N017_GOODS$_GET_SC_GOODS,//商品详情
} = base.requests;

var currentThis;
//商品详情
export default class GoodsDetailPage extends BaseComponent {
    constructor(props) {
        super(props);
        currentThis=this;
        this.state = {
            goodId: this.props.navigation.state.params.goodId,
            goodData: null,
            images: [],
            webviewHeight: 100,

            showIndictor:true,
            showShareBoard:false,

            center: {
                longitude: 113.981718,
                latitude: 22.542449
            },
            markers: [{
                longitude: 113.981718,
                latitude: 22.542449,
                title: "Window of the world"
            },{
                longitude: 113.995516,
                latitude: 22.537642,
                title: ""
            }]

        };

    };

    static navigationOptions = ({navigation}) => ({
        //动态设置标题
        // title: navigation.state.params.goodId,
        title: '商品详情',
        headerRight:(
        <TouchableOpacity
            onPress={()=>{currentThis._setShareBoard(true)}}
        >
            <Image
                style={{width:15,height:15,marginRight:20}}
                source={require('../../imgs/share/fenxiang.png')}
            />
        </TouchableOpacity>

        )
    });

    _setShareBoard(visible){
        this.setState({
            showShareBoard:visible,
        })
    }

    componentDidMount() {
        //联网获取商品详情

        this._getGoodsDetail(this.state.goodId);
        this._getLocation();

    }

    _getGoodsDetail(goodId) {
        base.network.getUipData(N017_GOODS$_GET_SC_GOODS,
            {'goodsId': goodId},
            (goodIdData) => {
                this.setState({
                    goodData: goodIdData[0],
                    images: goodIdData[0].images,
                    showIndictor:false
                })
            },
            (error) => {
                this.setState({
                    showIndictor:false
                })
                alert(JSON.stringify(error))

            }
        )
    }

    _getLocation(){
        Geolocation.getCurrentPosition()
            .then(location=>{
                this.setState({
                    showIndictor:false,
                    center: {
                        longitude: location.longitude,
                        latitude: location.latitude,
                    },

                    markers: [
                        {
                            longitude: location.longitude,
                            latitude: location.latitude,
                            title: "商家位置"
                        }
                    ]

                })
            })
            .catch(error=>{
            })

    }

    //设置banner位图片
    _setBannerImage() {
        var images = this.state.images;
        if (images.length > 0) {
            return (
                <View style={{backgroundColor: '#fff', marginTop: 10}}>
                    <Image style={base.styles.detail_image} source={{uri: images[0].url}}/>
                </View>
            )
        }
    }

    //设置商品 简介
    _setGoodsInfo() {
        var goodData = this.state.goodData;
        if (goodData) {
            return (
                <View style={{backgroundColor: '#fff', marginTop: 10}}>
                    <View style={{flexDirection: 'row', padding: 10, paddingLeft: 15, alignItems: 'center'}}>
                        <Image style={{width: 15, height: 15, marginRight: 10,}}
                               source={require('../../imgs/goods/goods_details.png')}/>
                        <Text>商品简介</Text>
                    </View>
                    <View style={{backgroundColor: '#DEDEDE', height: 1}}/>
                    <View style={{padding: 10, paddingLeft: 15, marginTop: 2}}>
                        <Text>{goodData.name}</Text>
                        <Text style={{marginTop: 10}}>{goodData.company.name}</Text>
                    </View>
                    <View style={{backgroundColor: '#DEDEDE', height: 1}}/>

                    <View style={{padding: 10, paddingLeft: 15, marginTop: 2}}>
                        <Text style={{color: '#FF6138'}}>¥ {goodData.unitPrice}</Text>
                    </View>
                </View>
            )
        }
    }

    _setGoodsDetail() {
        var goodData = this.state.goodData;


        if (goodData) {

            var HTML = "<html>\n" +
                "<title>\n" +
                "</title>\n" +
                "<style>\n" +
                "    img {\n" +
                "        width:100%;\n" +

                "    }\n" +
                "    p > span {\n" +
                "        width:100%;\n" +
                "        height:100%;\n" +
                "    }\n" +
                "</style>\n" +
                "<body>\n" +
                goodData.details +
                "<script>window.onload=function(){window.location.hash = 1;document.title = document.body.scrollHeight;}</script>" +
                "\n</body>\n" +
                "</html>\n";


            return (
                <View style={{flex: 1, backgroundColor: '#fff', marginTop: 10,}}>
                    <View style={{flexDirection: 'row', padding: 10, paddingLeft: 15, alignItems: 'center'}}>
                        <Image style={{width: 15, height: 15, marginRight: 10,}}
                               source={require('../../imgs/goods/icon_detail.png')}/>
                        <Text >商品详情</Text>
                    </View>

                    <View>
                        <WebView
                            domStorageEnabled={true}
                            decelerationRate="normal"
                            startInLoadingState={true}
                            source={{html: HTML}}
                            style={{flex: 1, height: this.state.webviewHeight}}
                            scrollEnabled={false}
                            bounces={false}
                            contentInset={{top: 0, left: 0}}
                            automaticallyAdjustContentInsets={true}
                            javaScriptEnabled={true}
                            onNavigationStateChange={(navState) => {
                                if (navState && navState.title && navState.title != undefined) {

                                    this.setState({
                                        webviewHeight: parseInt(navState.title)+20,
                                    })
                                }
                            }}
                        />

                    </View>


                </View>
            )
        }
    }

    _setGoodsMap(){
        return(
            <View style={{backgroundColor: '#fff', marginTop: 10}}>
                <View style={{flexDirection: 'row', padding: 10, paddingLeft: 15, alignItems: 'center'}}>
                    <Image style={{width: 15, height: 15, marginRight: 10,}}
                           source={require('../../imgs/goods/goods_details.png')}/>
                    <Text>商家位置</Text>
                </View>
                <View style={{backgroundColor: '#DEDEDE', height: 1}}/>
                <View style={{}}>
                    <MapView
                        trafficEnabled={false}
                        baiduHeatMapEnabled={false}
                        zoom={15}
                        mapType={MapTypes.NORMAL}
                        center={this.state.center}
                        markers={this.state.markers}
                        style={{height:200}}
                        onMarkerClick={(e) => {

                        }}
                        onMapClick={(e) => {
                        }}
                    >
                    </MapView>


                </View>
            </View>
        )
    }

    _setBottomView(){
        return(
            <View style={{height:'100%',backgroundColor:'#ffffff',alignItems:'center',justifyContent:'center'}}>

                <Text onPress={()=>{this._gotoMakeOrder()}}>下单就点这里哈</Text>

            </View>
        )
    }

    _setShareBoadrView(){
        let data=this.state.goodData;
        if(data){
            return(
                <ShareBoardPage
                    modalPreThis={(visible)=>{
                        this._setShareBoard(visible);
                    }}
                    modalVisible={this.state.showShareBoard}
                    ShareData={{shareTitle:data.name,shareIcon:data.iconUrl,shareDesc:data.des,shareLink:"http://www.baidu.com",shareType:'imageUrl'}}
                />
            )
        }

    }

    _gotoMakeOrder(){
        this.props.navigation.navigate('GoodsOrderPage',{goodDetail:this.state.goodData,goodId:this.state.goodId})
    }

    render() {


        return (
        <View>
            <AppIndictor
                modalVisible={this.state.showIndictor}
                size={'large'}
                color={'#ff6138'}
            />

            {this._setShareBoadrView()}

            <ScrollView style={{height:'92%',marginBottom:1}}>
                {this._setBannerImage()}
                {this._setGoodsInfo()}
                {this._setGoodsMap()}
                {this._setGoodsDetail()}


            </ScrollView>
            <View  style={{height:'8%'}}>
                {this._setBottomView()}
            </View>



        </View>


        )
    }

}
